<template>
  <div class="components-container">
    <div class="filter-container">
      <el-cascader
        v-model="listQuery.quarters"
        :options="arrYear"
        :props="props"
        collapse-tags
        class="filter-item"
        :clearable="false"
        size="small"
      ></el-cascader>
      <el-date-picker
        type="dates"
        v-model="listQuery.observeDates"
        value-format="yyyy-MM-dd"
        size="small"
        :clearable="false"
        placeholder="观察日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-select
        size="small"
        v-model="listQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="M1" border style="width: 100%;margin-bottom: 24px;">
      <el-table-column
        label="开户期间"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="逾期M3+百分比" align="left">
        <el-table-column
          v-for="item in header"
          :key="item"
          :label="item"
          :prop="item"
          align="center"
          min-width="100px"
        ></el-table-column>
      </el-table-column>
    </el-table>

    <el-table :data="M2" border style="width: 100%;margin-bottom: 24px;">
      <el-table-column
        label="开户期间"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="逾期M2+百分比" align="left">
        <el-table-column
          v-for="item in header"
          :key="item"
          :label="item"
          :prop="item"
          align="center"
          min-width="100px"
        ></el-table-column>
      </el-table-column>
    </el-table>

    <el-table :data="M3" border style="width: 100%;">
      <el-table-column
        label="开户期间"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="逾期M1+百分比" align="left">
        <el-table-column
          v-for="item in header"
          :key="item"
          :label="item"
          :prop="item"
          align="center"
          min-width="100px"
        ></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { getApply, getProducts } from '@/api/risksystem/riskMarket/search.ts'
import { getList } from '@/api/risksystem/riskMarket/maturityAnalysis'
const tabs: Array<any> = []
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private productName = [] //产品名
  private applySource = [] //渠道
  private props = { multiple: true }
  // private endDate = new Date()
  private myDate = new Date()
  private thisYear: any = this.myDate.getFullYear() // 获取当年年份
  private thisMonth: any = this.myDate.getMonth() + 1
  private thisQuarter =
    this.thisMonth <= 3
      ? 1
      : 3 < this.thisMonth && this.thisMonth <= 6
      ? 2
      : 6 < this.thisMonth && this.thisMonth <= 9
      ? 3
      : 4
  private Section = this.thisYear - 2000 // 声明一个变量 获得当前年份至想获取年份差 eg.2008
  private arrYear = tabs // 声明一个空数组 把遍历出的年份添加到数组里
  private M1 = []
  private M2 = []
  private M3 = []
  private header = []
  private listQuery: any = {
    applySource: '',
    productName: '',
    observeDates: [this.formatDate(new Date())],
    quarters: [[this.thisYear, this.thisQuarter]]
  }
  created() {
    this.getTable()
    this.getApplylist()
    this.getProducts()
  }
  mounted() {
    // this.getApply()
    this.years(this.thisYear)
  }
  @Watch('datePicker')
  // private onDatePickerChange(value: boolean) {
  //   this.listQuery.startDate = this.datePicker ? this.datePicker[0] : undefined
  //   this.listQuery.endDate = this.datePicker ? this.datePicker[1] : undefined
  // }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  // 列表获取
  private async getTable() {
    const { data } = await getList({ search: this.listQuery })
    this.header = data.header
    this.M1 = data.rows.m1
    this.M2 = data.rows.m2
    this.M3 = data.rows.m3
  }

  // 查询、重置
  private handleFilter(val: string) {
    this.getTable()
  }
  private handleReset(val: string) {
    this.listQuery = {
      applySource: '',
      productName: '',
      observeDates: [this.formatDate(new Date())],
      quarters: [[this.thisYear, this.thisQuarter]]
    }
  }
  private downloand() {
    console.log('下载')
  }
  private years(year: any) {
    for (let i = 0; i <= this.Section + 1; i++) {
      var yearVal = year--
      let yearObj: any = {
        value: yearVal,
        label: yearVal,
        children: [
          {
            value: '1',
            label: 'Q1'
          },
          {
            value: '2',
            label: 'Q2'
          },
          {
            value: '3',
            label: 'Q3'
          },
          {
            value: '4',
            label: 'Q4'
          }
        ]
      }
      this.arrYear.push(yearObj)
    }
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return year + '-' + month + '-' + date
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
